<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>零食销售额动态排序柱状图</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 100%; height: 800px"></div>
        <script>
            var chartDom = document.getElementById("main");
            var myChart = echarts.init(chartDom);
            var option;

            const rawData = `日期 薯片 巧克力 果冻 饼干 糖果 坚果 瓜子 辣条
2024/11/23 800 2500 520 1151 1500 1500 665 431
2024/11/24 838 2649 587 1257 1589 1605 729 494
2024/11/25 879 2792 676 1258 1675 1688 707 553
2024/11/26 921 2923 636 1212 1754 1825 725 610
2024/11/27 965 3038 712 1221 1823 1988 698 642
2024/11/28 1012 3131 687 1246 1879 2766 718 784
2024/11/29 1061 3199 818 1257 1919 2264 739 713
2024/11/30 1112 3239 790 1310 1943 3319 720 640
2024/12/1 1165 3250 913 1260 1950 2399 765 676
2024/12/2 1221 3230 1227 1256 1938 2719 766 822
2024/12/3 1280 3182 1297 1296 1909 3101 753 880
2024/12/4 1341 3106 913 1354 1864 4155 785 809
2024/12/5 1406 3007 989 1365 1804 3150 756 1230
2024/12/6 1474 2887 1192 1402 1732 3406 800 1195
2024/12/7 1545 2751 1765 1419 1651 4244 779 1359
2024/12/8 1619 2606 1523 1353 1564 3283 809 1221
2024/12/9 1697 2456 1576 1396 1474 4758 817 1250
2024/12/10 1778 2308 1393 1401 1385 3765 790 1345
2024/12/11 1864 2168 1605 1448 1301 6073 819 1095
2024/12/12 1954 2041 2139 1378 1225 4383 867 1123
2024/12/13 2048 1932 1388 1446 1159 4966 852 1048
2024/12/14 2146 1846 1723 1425 1108 3358 878 1549
2024/12/15 2249 1786 1179 1505 1072 4506 821 1694
2024/12/16 2358 1755 2090 1520 1053 5036 854 1636
2024/12/17 2471 1753 1233 1515 1052 5725 855 1826
2024/12/18 2590 564 1813 1487 338 4788 898 1317
2024/12/19 2715 570 1237 1504 342 5342 903 1299
2024/12/20 2845 583 2311 1579 350 5856 889 1016
2024/12/21 2982 602 2422 1557 361 3714 863 1727
2024/12/22 3126 625 1564 1493 375 6261 883 1060
2024/12/23 3276 651 2283 1539 390 3665 912 1729
2024/12/24 3434 677 1631 1512 406 7048 891 1249
2024/12/25 3599 701 2513 1568 421 4979 899 1997
2024/12/26 3772 723 1594 1635 434 5383 963 982
2024/12/27 3953 740 2270 1588 444 5836 937 1796
2024/12/28 4144 752 1522 1656 451 5335 946 1967
2024/12/29 4343 758 2380 1680 455 8039 923 944
2024/12/30 4552 757 1397 1702 454 4264 939 1091
2024/12/31 4771 748 2441 1604 449 6156 960 2009
2025/1/1 5000 732 1265 1655 439 4534 982 968
2025/1/2 5241 709 1151 1675 426 5136 995 1403
2025/1/3 5493 680 1472 1644 408 5931 975 2133
2025/1/4 5757 646 1699 1752 388 8011 1026 976
2025/1/5 6034 608 2135 1691 365 3952 1015 1257
2025/1/6 6325 566 2601 1737 340 4189 1042 1904
2025/1/7 6629 523 2590 1753 314 4040 1039 2048
2025/1/8 6948 479 2192 1711 287 7557 1030 964
2025/1/9 7282 436 2381 1729 262 5868 1054 1950
2025/1/10 7633 395 1967 1817 237 6439 1009 1734
2025/1/11 8000 356 1277 1761 214 4167 1046 2303`;

            const data = {};
            const lines = rawData.split("\n");
            const headers = lines[0].split(" ");

            for (let i = 1; i < lines.length; i++) {
                const values = lines[i].split(" ");
                const date = values[0];
                data[date] = {};
                for (let j = 1; j < values.length; j++) {
                    data[date][headers[j]] = parseFloat(values[j]);
                }
            }

            const dates = Object.keys(data);
            const categories = Object.keys(data[dates[0]]);

            function update(date) {
                const currentData = data[date];
                return Object.entries(currentData)
                    .sort((a, b) => b[1] - a[1])
                    .map(([name, value]) => ({
                        name: name,
                        value: value,
                    }));
            }

            option = {
                title: {
                    text: "零食销售额排行榜",
                    left: "center",
                },
                grid: {
                    top: 50,
                    bottom: 30,
                    left: 150,
                    right: 80,
                },
                xAxis: {
                    max: "dataMax",
                    axisLabel: {
                        formatter: function (n) {
                            return "¥" + n.toFixed(0);
                        },
                    },
                },
                yAxis: {
                    type: "category",
                    inverse: true,
                    animationDuration: 300,
                    animationDurationUpdate: 300,
                    axisLabel: {
                        show: true,
                        fontSize: 14,
                        color: "#333",
                    },
                    data: categories,
                },
                series: [
                    {
                        realtimeSort: true,
                        seriesLayoutBy: "column",
                        type: "bar",
                        itemStyle: {
                            color: function (param) {
                                return (
                                    [
                                        "#5470c6",
                                        "#91cc75",
                                        "#fac858",
                                        "#ee6666",
                                        "#73c0de",
                                        "#3ba272",
                                        "#fc8452",
                                        "#9a60b4",
                                    ][param.dataIndex] || "#5470c6"
                                );
                            },
                        },
                        encode: {
                            x: "value",
                            y: "name",
                        },
                        label: {
                            show: true,
                            precision: 1,
                            position: "right",
                            valueAnimation: true,
                            formatter: "¥{@value}",
                        },
                    },
                ],
                animationDuration: 0,
                animationDurationUpdate: 1000,
                animationEasing: "linear",
                animationEasingUpdate: "linear",
                graphic: {
                    elements: [
                        {
                            type: "text",
                            right: 160,
                            bottom: 60,
                            style: {
                                text: "2024-11-23",
                                font: "bolder 80px monospace",
                                fill: "rgba(100, 100, 100, 0.25)",
                            },
                            z: 100,
                        },
                    ],
                },
            };

            let currentIndex = 0;

            setInterval(function () {
                const date = dates[currentIndex];
                option.graphic.elements[0].style.text = date;
                option.series[0].data = update(date);
                myChart.setOption(option);
                currentIndex = (currentIndex + 1) % dates.length;
            }, 1000);

            option.series[0].data = update(dates[0]);
            myChart.setOption(option);
        </script>
    </body>
</html>
